<template>
    <div class="home">
        <allHead>
            <template v-slot:left>智能备课助手</template>
        </allHead>
        <div class="content">
            <div class="select-lesson">
                <div class="select-top">
                    <div class="present">当前备课内容</div>
                    <van-button v-debounce="showPopup" icon="exchange" size="mini" type="primary" color="black"  plain round />
                </div>
                <div class="present-lesson" v-if="book">
                    {{book.editions}}{{book.textClass}}{{book.term}}{{book.subject}}{{book.unit}}{{book.content}}
                </div>  
            </div>
            <div class="ai-item"> 
                <div class="item">
                    <i class="iconfont icon-jiaoan1"></i>
                    <div class="ai-title">智能教案生成</div>
                    <div class="introduce">智能生成教案</div>
                    <van-button type="primary" size="small" to="talks" block >开始生成</van-button>
                </div>
                <div class="item">
                    <i class="iconfont icon-tupian"></i>
                    <div class="ai-title">教学图片生成</div>
                    <div class="introduce">智能生成教学图片</div>
                    <van-button type="primary" size="small" to="picture" block>开始生成</van-button>
                </div>
                <div class="item">
                    <i class="iconfont icon-shipin"></i>
                    <div class="ai-title">教学视频生成</div>
                    <div class="introduce">智能生成教学视频</div>
                    <van-button type="primary" size="small" to="video" block>开始生成</van-button>
                </div>
                <div class="item">
                    <i class="iconfont icon-tiku"></i>
                    <div class="ai-title">智能题库生成</div>
                    <div class="introduce">智能生成相关题库</div>
                    <van-button type="primary" size="small" to='askQuestion' block>开始生成</van-button>
                </div>
            </div>
        </div>
    </div>
    <popText  :isShow="isShow"  @update="update" />
</template>

<script setup>
import allHead from "@/components/allHead.vue";
import popText from "@/components/popText.vue";
import { useBookStore } from "@/stores/bookStore.js";
import { ref } from "vue";

const isShow = ref(false);
const bookStore = useBookStore();
const book = ref(bookStore.book.book||{})



const showPopup = () => {
    isShow.value = true;
    //console.log(show.value);
};

const update = (values) => {
    isShow.value = false;
    book.value = values;
}

</script>

<style lang="less" scoped>
.home {
    background-color: #FAFAFA;
    height: 100vh;

    .content {
        margin: 12px 14px;

        .select-lesson {
            padding: 14px 14px;
            background-color: white;
            border-radius: 7px;
            box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);

            .select-top {
                display: flex;
                margin-bottom: 5px;

                .present {
                    font-family: Roboto;
                    font-size: 15px;
                    line-height: 17.5px;
                    color: #6B7280;
                    align-content: center;
                    margin-right: 5px;
                }
            }

            .present-lesson {
                font-size: 16px;
                font-weight: 600;
            }
        }

        .ai-item {
            display: grid;
            margin-top: 21px;
            grid-template-columns: repeat(2, 1fr);

            .item:first-child {
                margin-right: 14px;
            }

            .item:nth-child(3) {
                margin-right: 14px;
            }

            .item {
                display: flex;
                flex-direction: column;
                margin-bottom: 14px;
                background-color: white;
                padding: 14px 14px;
                border-radius: 7px;
                box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);

                .iconfont {
                    font-size: 60px;
                }

                i {
                    text-align: center;
                    margin: 20px 0;
                    color: #2563EB;
                }

                .ai-title {
                    font-size: 17px;
                    font-weight: 600;
                    text-align: center;
                    margin: 10px 0;
                }
                .introduce {
                    font-size: 14px;
                    color: #6B7280;
                    margin: 10px 0 20px 0;
                    text-align: center;
                }

            }
        }
    }
}
</style>